<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>事件的封装-小懒猫</title>
		<meta name="keywords" content="关键字,关键字"/>
		<meta name="description" content="描述信息">
		<link rel="stylesheet" href="css/common.css" />
		<style type="text/css">
			body{
				padding:200px;
			}
			#wrap{
				width: 640px;
			}
			#wrap li{
				font-size:20px;
				color:#fff;
				height: 40px;
				background: #9f793a;
				margin-bottom: 8px;
			}
		</style>
	</head>
	<body>
	<ul id="wrap">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<a id="add" href="javascript:void(0);" onclick="clickMe()">添加</a>

		<script type="text/javascript">

			function dom(id) {
				return document.getElementById(id);
			}

			function clickMe(){
				dom("wrap").innerHTML += "<li>"+Math.random()+"</li>";
			}

			leOn({
				id : "add",
				type: "click",
				fn : function(){
					dom("wrap").innerHTML += "<li>"+Math.random()+"</li>";
				}
			});



			function leOn(opts) {
				var obj = dom(opts.id);
				obj.addEventListener(opts.eventType, function (e) {
					//事件类型兼容写法
					var ev = e || window.event;
					//当前目标元素
					var currentTarget = ev.currentTarget;
					//鼠标停留的元素
					var target = ev.target || ev.srcElement;
					//类型栏判断是不是委托
					if (opts.type) {
						if (target.tagName.toLowerCase() === opts.type) {
							if (opts.fn) opts.fn.call(target)
						}
					} else {
						if (opts.fn) opts.fn.call(currentTarget)
					}

				}, false);
			}
		</script>
	</body>
</html>
